<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>JS面试题汇总 | 破破的QQ空间</title><meta name="author" content="破破"><meta name="copyright" content="破破"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="js 的数据类型有哪些？基本类型:  String Array Boolean Null undefined symbol ( ES6 新增 )  引用类型:Object 包括 Array Function Date 从输入 URL 到页面加载发生了什么 DNS 解析 TCP 连接 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 连接结束  &#x3D;&#x3D;">
<meta property="og:type" content="article">
<meta property="og:title" content="JS面试题汇总">
<meta property="og:url" content="https://leiboy.gitee.io/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/index.html">
<meta property="og:site_name" content="破破的QQ空间">
<meta property="og:description" content="js 的数据类型有哪些？基本类型:  String Array Boolean Null undefined symbol ( ES6 新增 )  引用类型:Object 包括 Array Function Date 从输入 URL 到页面加载发生了什么 DNS 解析 TCP 连接 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 连接结束  &#x3D;&#x3D;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://leiboy.gitee.io/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/js%E5%9B%BE%E7%89%87.png">
<meta property="article:published_time" content="2022-07-09T13:20:02.000Z">
<meta property="article:modified_time" content="2024-07-01T14:13:29.121Z">
<meta property="article:author" content="破破">
<meta property="article:tag" content="js">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://leiboy.gitee.io/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/js%E5%9B%BE%E7%89%87.png"><link rel="shortcut icon" href="/blog/img/favicon.png"><link rel="canonical" href="https://leiboy.gitee.io/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/blog/css/index.css?v=4.14.0-b3"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>(()=>{
      const saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
      
      window.btf = {
        saveToLocal: saveToLocal,
        getScript: (url, attr = {}) => new Promise((resolve, reject) => {
          const script = document.createElement('script')
          script.src = url
          script.async = true
          script.onerror = reject
          script.onload = script.onreadystatechange = function() {
            const loadState = this.readyState
            if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
            script.onload = script.onreadystatechange = null
            resolve()
          }

          Object.keys(attr).forEach(key => {
            script.setAttribute(key, attr[key])
          })

          document.head.appendChild(script)
        }),

        getCSS: (url, id = false) => new Promise((resolve, reject) => {
          const link = document.createElement('link')
          link.rel = 'stylesheet'
          link.href = url
          if (id) link.id = id
          link.onerror = reject
          link.onload = link.onreadystatechange = function() {
            const loadState = this.readyState
            if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
            link.onload = link.onreadystatechange = null
            resolve()
          }
          document.head.appendChild(link)
        }),

        addGlobalFn: (key, fn, name = false, parent = window) => {
          const pjaxEnable = false
          if (!pjaxEnable && key.startsWith('pjax')) return

          const globalFn = parent.globalFn || {}
          const keyObj = globalFn[key] || {}
    
          if (name && keyObj[name]) return
    
          name = name || Object.keys(keyObj).length
          keyObj[name] = fn
          globalFn[key] = keyObj
          parent.globalFn = globalFn
        }
      }
    
      const activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      const activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }

      btf.activateDarkMode = activateDarkMode
      btf.activateLightMode = activateLightMode
      
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })()</script><script>const GLOBAL_CONFIG = {
  root: '/blog/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":true,"highlightMacStyle":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid@4.11.1/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'JS面试题汇总',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-07-01 22:13:29'
}</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">10</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><hr class="custom-hr"/></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/js%E5%9B%BE%E7%89%87.png')"><nav id="nav"><span id="blog-info"><a href="/blog/" title="破破的QQ空间"><span class="site-name">破破的QQ空间</span></a></span><div id="menus"><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">JS面试题汇总</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-07-09T13:20:02.000Z" title="发表于 2022-07-09 21:20:02">2022-07-09</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-07-01T14:13:29.121Z" title="更新于 2024-07-01 22:13:29">2024-07-01</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="JS面试题汇总"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="js-的数据类型有哪些？"><a href="#js-的数据类型有哪些？" class="headerlink" title="js 的数据类型有哪些？"></a>js 的数据类型有哪些？</h3><p>基本类型:</p>
<ul>
<li>String</li>
<li>Array</li>
<li>Boolean</li>
<li>Null</li>
<li>undefined</li>
<li>symbol ( ES6 新增 )</li>
</ul>
<p>引用类型:Object 包括 Array Function Date</p>
<h3 id="从输入-URL-到页面加载发生了什么"><a href="#从输入-URL-到页面加载发生了什么" class="headerlink" title="从输入 URL 到页面加载发生了什么"></a>从输入 URL 到页面加载发生了什么</h3><ul>
<li>DNS 解析</li>
<li>TCP 连接</li>
<li>发送 HTTP 请求</li>
<li>服务器处理请求并返回 HTTP 报文</li>
<li>浏览器解析渲染页面</li>
<li>连接结束</li>
</ul>
<h3 id="和-有什么区别？"><a href="#和-有什么区别？" class="headerlink" title="&#x3D;&#x3D; 和 &#x3D;&#x3D;&#x3D; 有什么区别？"></a>&#x3D;&#x3D; 和 &#x3D;&#x3D;&#x3D; 有什么区别？</h3><p><code>==</code> 不会判断类型，而 <code>===</code> 会先判断类型</p>
<h3 id="的指向问题"><a href="#的指向问题" class="headerlink" title="的指向问题"></a>的指向问题</h3><ul>
<li>单独的 this，指向 window</li>
<li>默认指向调用自己的对象</li>
<li>构造函数中的 this 指向生成的新对象</li>
<li>定时器中的 this，指向 window</li>
</ul>
<h3 id="this-的指向？"><a href="#this-的指向？" class="headerlink" title="this 的指向？"></a>this 的指向？</h3><ul>
<li>call: 第一个参数为要指向的对象，第二个参数之后跟普通函数传参一样</li>
<li>apply: 第一个参数为要指向的对象，第二个参数之后以数组形式传参</li>
<li>bind: 调用不会立即执行，而是返回一个新的改变过 this 指向的方法，而以上两个方法是立即执行的。</li>
</ul>
<h3 id="作用域和作用域链"><a href="#作用域和作用域链" class="headerlink" title="作用域和作用域链"></a>作用域和作用域链</h3><ul>
<li><p>作用域：在 js 预编译时、代码执行之前，对全局或者局部的变量进行收集，存放在相应的 scope 中，执行时从 scope 获取数据，scope 就是全局或者局部的作用域</p>
</li>
<li><p>访问变量时，会沿着 scope 一层一层找，这就叫做作用域链</p>
</li>
</ul>
<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><p>两个连接 scope 的函数，关闭了函数的自由变量，让它暂时不会被销毁</p>
<h3 id="闭包的特点"><a href="#闭包的特点" class="headerlink" title="闭包的特点"></a>闭包的特点</h3><ul>
<li>函数嵌套函数</li>
<li>函数内部可以调用外部的参数和变量</li>
<li>参数和变量不会被垃圾回收机制回收</li>
</ul>
<h3 id="数组操作方法"><a href="#数组操作方法" class="headerlink" title="数组操作方法"></a>数组操作方法</h3><ul>
<li>push 从后新增</li>
<li>pop 从后删除</li>
<li>unshift 从前添加</li>
<li>shift 从前删除</li>
<li>sort 从小到大排序</li>
<li>reverse 翻转</li>
<li>concat 拼接数组</li>
<li>slice 提取数组</li>
<li>splice 删除 插入 替换</li>
</ul>
<p><strong>遍历方法：</strong></p>
<table>
<thead>
<tr>
<th>方法</th>
<th>特点</th>
</tr>
</thead>
<tbody><tr>
<td>forEach</td>
<td>不会返回新的数组</td>
</tr>
<tr>
<td>map</td>
<td>会根据条件返回一个新的数组</td>
</tr>
<tr>
<td>filter</td>
<td>过滤器</td>
</tr>
<tr>
<td>some</td>
<td>只要数组中有一项满足回调函数中设置的条件就返回 true;</td>
</tr>
<tr>
<td>reduce</td>
<td>叠加器或者累加器</td>
</tr>
</tbody></table>
<h3 id="字符串操作方法"><a href="#字符串操作方法" class="headerlink" title="字符串操作方法"></a>字符串操作方法</h3><ul>
<li>indexOf 查找首次出现的位置</li>
<li>lastIndexOf 查找最后一次出现的位置</li>
<li>slice 提取字符串 可以接收负值</li>
<li>subString 提取字符串 不能接收负值</li>
<li>replace 用一个值替换字符串中的一个值</li>
<li>concat 链接多个字符串</li>
</ul>
<h3 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h3><ul>
<li>es6 的扩展运算符 “ … ”</li>
<li>遍历赋值</li>
<li>Object.assign()</li>
</ul>
<h3 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h3><ul>
<li>递归遍历 + 一些判断</li>
<li>JSON.parce( JSON.stringify ( Object ) )</li>
</ul>
<h3 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h3><p>在第一次触发事件时，不立即执行，而是等一段时间比如 200ms ，如果相应时间内没有再次触发事件，则执行函数，如果再次触发了，则重新开始计时</p>
<h3 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h3><p>在函数执行后，让这个函数在一定时间内失效，防止用户频繁操作</p>
<h3 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h3><table>
  <tr>
    <th>属性</th>
    <th>特点</th>
  </tr>
  <tr>
    <td rowspan="3">cookie</td>
    <td>存储较小</td>
  </tr>
  <tr>
    <td>可以设置过期时间</td>
  </tr>
  <tr>
    <td>可与服务器传递</td>
  </tr>
  <tr>
    <td rowspan="3">localStorage</td>
    <td>存储较大</td>
  </tr>
  <tr>
    <td>永久有效，除非手动删除</td>
  </tr>
  <tr>
    <td>只在客户端保存</td>
  </tr>
  <tr>
    <td rowspan="3">sessionStorage</td>
    <td>存储较大</td>
  </tr>
  <tr>
    <td>关闭当前窗口删除</td>
  </tr>
  <tr>
    <td>只在客户端保存</td>
  </tr>
</table>

<h3 id="同步、异步？"><a href="#同步、异步？" class="headerlink" title="同步、异步？"></a>同步、异步？</h3><p>JS 的同步异步始终都是单线程的，也就是一条任务线，但是异步时可以改变执行顺序的。</p>
<h3 id="什么是事件冒泡"><a href="#什么是事件冒泡" class="headerlink" title="什么是事件冒泡"></a>什么是事件冒泡</h3><p>多层嵌套的元素，子元素触发事件会冒泡到父级元素</p>
<h3 id="事件代理"><a href="#事件代理" class="headerlink" title="事件代理"></a>事件代理</h3><p>本来应该加到子元素的事件，我们把他加到父元素上，event 里边存储着事件源，也就是说，我们可以知道执行事件的元素时哪个</p>
<h3 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h3><ul>
<li>setTimeout: 只执行一次</li>
<li>setInterval: 无限次执行</li>
</ul>
<h3 id="什么是原型？"><a href="#什么是原型？" class="headerlink" title="什么是原型？"></a>什么是原型？</h3><p>每个函数都有一个 propotype 属性，它默认指向一个 Object 空对象，这个对象就叫做原型，原型对象中都有一个 constructor 属性，它指向原型</p>
<h3 id="什么是原型链？"><a href="#什么是原型链？" class="headerlink" title="什么是原型链？"></a>什么是原型链？</h3><p>访问一个对象的属性时，现在自身原型中查找，如果没有找到，再在 <code>__proto__</code> 这条链上查找，一直找到最上层，由 <code>__proto__</code> 连接起来的就叫原型链</p>
<h3 id="如何实现继承？"><a href="#如何实现继承？" class="headerlink" title="如何实现继承？"></a>如何实现继承？</h3><ul>
<li>es6 使用: extend 继承</li>
<li>构造函数:<ul>
<li>原型链继承，让新实例的原型指向父级的实例</li>
<li>call、apply</li>
</ul>
</li>
</ul>
<h3 id="call-和-apply-的含义和区别？"><a href="#call-和-apply-的含义和区别？" class="headerlink" title=".call() 和 .apply() 的含义和区别？"></a>.call() 和 .apply() 的含义和区别？</h3><p><strong>含义：</strong></p>
<p>call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。 后面的参数都是传递给当前对象的参数。</p>
<p><strong>区别：</strong></p>
<p>apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而 call 则作为 call 的参数传入（从第二个参数开始）。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>, obj1, obj2, obj3);</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。</p>
</blockquote>
<h3 id="new-操作符具体干了什么呢"><a href="#new-操作符具体干了什么呢" class="headerlink" title=". new 操作符具体干了什么呢?"></a>. new 操作符具体干了什么呢?</h3><ul>
<li>1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。</li>
<li>2、属性和方法被加入到 this 引用的对象中。</li>
<li>3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。</li>
</ul>
<h3 id="document-load-和-document-ready-的区别？"><a href="#document-load-和-document-ready-的区别？" class="headerlink" title="document load 和 document ready 的区别？"></a>document load 和 document ready 的区别？</h3><ul>
<li>Document.onload 是在结构和样式加载完才执行 js</li>
<li>window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发 window.onload 事件</li>
<li>Document.ready 原生中没有这个方法，jquery 中有 $().ready(function)</li>
</ul>
<h3 id="什么是同源策略？"><a href="#什么是同源策略？" class="headerlink" title="什么是同源策略？"></a>什么是同源策略？</h3><p>一段脚本只能读取来自于同一来源的窗口和文档的属性</p>
<h3 id="ajax-的步骤"><a href="#ajax-的步骤" class="headerlink" title="ajax 的步骤"></a>ajax 的步骤</h3><ul>
<li>创建 XMLHttpRequest 异步对象</li>
<li>创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息</li>
<li>设置响应 HTTP 请求状态变化的函数</li>
<li>发送 HTTP 请求</li>
<li>获取异步调用返回的数据.</li>
</ul>
<h3 id="DOM-节点的增删改查"><a href="#DOM-节点的增删改查" class="headerlink" title="DOM 节点的增删改查"></a>DOM 节点的增删改查</h3><ul>
<li>dom.appendChild() 添加</li>
<li>dom.insertBefore() 插入</li>
<li>dom.replaceChild() 替换</li>
<li>dom.removeChild() 删除</li>
</ul>
<h3 id="怎么判断数据类型？"><a href="#怎么判断数据类型？" class="headerlink" title="怎么判断数据类型？"></a>怎么判断数据类型？</h3><ul>
<li>typeof<ul>
<li>返回数据类型，包含这 7 种： number、boolean、symbol、string、object、undefined、function。</li>
<li>引用类型，除了 function 返回 function 类型外，其他均返回 object。</li>
<li>其中，null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型</li>
</ul>
</li>
<li>instanceof</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(&#123;&#125; <span class="keyword">instanceof</span> <span class="title class_">Object</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([] <span class="keyword">instanceof</span> <span class="title class_">Array</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([] <span class="keyword">instanceof</span> <span class="title class_">Object</span>); <span class="comment">//true</span></span><br><span class="line"><span class="keyword">let</span> fn = <span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn <span class="keyword">instanceof</span> <span class="title class_">Function</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<ul>
<li>toString 结合 call</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">toString</span>(&#123;&#125;)); <span class="comment">//[object Object]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="string">&quot;&quot;</span>)); <span class="comment">//[object String]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="number">1</span>)); <span class="comment">//[object Number]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">true</span>)); <span class="comment">//[object Boolean]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">undefined</span>)); <span class="comment">//[object Undefined]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">null</span>)); <span class="comment">//[object Null]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="title class_">Symbol</span>())); <span class="comment">//[object Symbol]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Error</span>())); <span class="comment">//[object Error]</span></span><br></pre></td></tr></table></figure>

<ul>
<li>constructor</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Number</span>(<span class="number">1</span>).<span class="property">constructor</span> == <span class="title class_">Number</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">String</span>(<span class="number">1</span>).<span class="property">constructor</span> == <span class="title class_">String</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">true</span>.<span class="property">constructor</span> == <span class="title class_">Boolean</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Object</span>().<span class="property">constructor</span> == <span class="title class_">Object</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Error</span>().<span class="property">constructor</span> == <span class="title class_">Error</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<h3 id="你对Promise的理解"><a href="#你对Promise的理解" class="headerlink" title="你对Promise的理解"></a>你对Promise的理解</h3><p>异步编程的一种解决方案，可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。</p>
<ul>
<li>promise.then()：获取异步任务的正常结果。</li>
<li>promise.catch()：获取异步任务的异常结果。</li>
<li>promise.finaly()：异步任务无论成功与否，都会执行。</li>
</ul>
<h3 id="Promise-all-和-Promise-race"><a href="#Promise-all-和-Promise-race" class="headerlink" title="Promise.all() 和 Promise.race()"></a>Promise.all() 和 Promise.race()</h3><ul>
<li>Promise.all()：并发处理多个异步任务，所有任务都执行成功，才能得到结果。</li>
<li>Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。</li>
</ul>
<h3 id="除了Promise还有其他异步写法？"><a href="#除了Promise还有其他异步写法？" class="headerlink" title="除了Promise还有其他异步写法？"></a>除了Promise还有其他异步写法？</h3><ul>
<li>es7 的async await</li>
<li>generator函数和yield</li>
</ul>
<h3 id="es6有哪些新特性"><a href="#es6有哪些新特性" class="headerlink" title="es6有哪些新特性"></a>es6有哪些新特性</h3><ul>
<li>Let和const关键字</li>
<li>模板字符串</li>
<li>对象数组的解构赋值</li>
<li>扩展运算符</li>
<li>箭头函数</li>
<li>Promise</li>
<li>class</li>
</ul>
<h3 id="try-catch"><a href="#try-catch" class="headerlink" title="try catch"></a>try catch</h3><p>异常捕获，只要代码中有出错，catch就会捕捉到</p>
<h3 id="数组塌陷问题"><a href="#数组塌陷问题" class="headerlink" title="数组塌陷问题"></a>数组塌陷问题</h3><p>如循环数组的过程中删除了数组的某一项 那么后边的所有索引值都会-1，最终循环结果会错误</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://leiboy.gitee.io/blog">破破</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://leiboy.gitee.io/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/">https://leiboy.gitee.io/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://leiboy.gitee.io/blog" target="_blank">破破的QQ空间</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/blog/tags/js/">js</a></div><div class="post_share"><div class="social-share" data-image="/blog/2022/07/09/JS%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/js%E5%9B%BE%E7%89%87.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/2022/07/10/HTML%E5%92%8CCSS%E9%9D%A2%E8%AF%95%E9%A2%98/" title="HTML和CSS面试题"><img class="cover" src="/blog/2022/07/10/HTML%E5%92%8CCSS%E9%9D%A2%E8%AF%95%E9%A2%98/csslogo.png" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">HTML和CSS面试题</div></div></a></div><div class="next-post pull-right"><a href="/blog/2022/07/01/js%E4%BB%A3%E7%A0%81%E9%A2%98/" title="js代码题"><img class="cover" src="/blog/2022/07/01/js%E4%BB%A3%E7%A0%81%E9%A2%98/js%E5%9B%BE%E7%89%87.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">js代码题</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/blog/2022/07/01/js%E4%BB%A3%E7%A0%81%E9%A2%98/" title="js代码题"><img class="cover" src="/blog/2022/07/01/js%E4%BB%A3%E7%A0%81%E9%A2%98/js%E5%9B%BE%E7%89%87.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-07-01</div><div class="title">js代码题</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/blog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">破破</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">10</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">js 的数据类型有哪些？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%8E%E8%BE%93%E5%85%A5-URL-%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88"><span class="toc-number">2.</span> <span class="toc-text">从输入 URL 到页面加载发生了什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%92%8C-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">3.</span> <span class="toc-text">&#x3D;&#x3D; 和 &#x3D;&#x3D;&#x3D; 有什么区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9A%84%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98"><span class="toc-number">4.</span> <span class="toc-text">的指向问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#this-%E7%9A%84%E6%8C%87%E5%90%91%EF%BC%9F"><span class="toc-number">5.</span> <span class="toc-text">this 的指向？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE"><span class="toc-number">6.</span> <span class="toc-text">作用域和作用域链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%97%AD%E5%8C%85"><span class="toc-number">7.</span> <span class="toc-text">闭包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">8.</span> <span class="toc-text">闭包的特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">9.</span> <span class="toc-text">数组操作方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">10.</span> <span class="toc-text">字符串操作方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="toc-number">11.</span> <span class="toc-text">浅拷贝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="toc-number">12.</span> <span class="toc-text">深拷贝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%B2%E6%8A%96"><span class="toc-number">13.</span> <span class="toc-text">防抖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8A%82%E6%B5%81"><span class="toc-number">14.</span> <span class="toc-text">节流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8"><span class="toc-number">15.</span> <span class="toc-text">本地存储</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E3%80%81%E5%BC%82%E6%AD%A5%EF%BC%9F"><span class="toc-number">16.</span> <span class="toc-text">同步、异步？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1"><span class="toc-number">17.</span> <span class="toc-text">什么是事件冒泡</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86"><span class="toc-number">18.</span> <span class="toc-text">事件代理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">19.</span> <span class="toc-text">定时器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%EF%BC%9F"><span class="toc-number">20.</span> <span class="toc-text">什么是原型？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E5%9E%8B%E9%93%BE%EF%BC%9F"><span class="toc-number">21.</span> <span class="toc-text">什么是原型链？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%BB%A7%E6%89%BF%EF%BC%9F"><span class="toc-number">22.</span> <span class="toc-text">如何实现继承？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#call-%E5%92%8C-apply-%E7%9A%84%E5%90%AB%E4%B9%89%E5%92%8C%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">23.</span> <span class="toc-text">.call() 和 .apply() 的含义和区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#new-%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%85%B7%E4%BD%93%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%E5%91%A2"><span class="toc-number">24.</span> <span class="toc-text">. new 操作符具体干了什么呢?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#document-load-%E5%92%8C-document-ready-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">25.</span> <span class="toc-text">document load 和 document ready 的区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5%EF%BC%9F"><span class="toc-number">26.</span> <span class="toc-text">什么是同源策略？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ajax-%E7%9A%84%E6%AD%A5%E9%AA%A4"><span class="toc-number">27.</span> <span class="toc-text">ajax 的步骤</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-%E8%8A%82%E7%82%B9%E7%9A%84%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5"><span class="toc-number">28.</span> <span class="toc-text">DOM 节点的增删改查</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E5%88%A4%E6%96%AD%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%EF%BC%9F"><span class="toc-number">29.</span> <span class="toc-text">怎么判断数据类型？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%A0%E5%AF%B9Promise%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">30.</span> <span class="toc-text">你对Promise的理解</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise-all-%E5%92%8C-Promise-race"><span class="toc-number">31.</span> <span class="toc-text">Promise.all() 和 Promise.race()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%99%A4%E4%BA%86Promise%E8%BF%98%E6%9C%89%E5%85%B6%E4%BB%96%E5%BC%82%E6%AD%A5%E5%86%99%E6%B3%95%EF%BC%9F"><span class="toc-number">32.</span> <span class="toc-text">除了Promise还有其他异步写法？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#es6%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B0%E7%89%B9%E6%80%A7"><span class="toc-number">33.</span> <span class="toc-text">es6有哪些新特性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#try-catch"><span class="toc-number">34.</span> <span class="toc-text">try catch</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%A1%8C%E9%99%B7%E9%97%AE%E9%A2%98"><span class="toc-number">35.</span> <span class="toc-text">数组塌陷问题</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/03/18/React%E6%A8%A1%E6%8B%9F%E7%A7%BB%E5%85%A5title%E6%8F%90%E7%A4%BA/" title="React模拟移入title提示"><img src="/blog/2023/03/18/React%E6%A8%A1%E6%8B%9F%E7%A7%BB%E5%85%A5title%E6%8F%90%E7%A4%BA/react-logo.png" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="React模拟移入title提示"/></a><div class="content"><a class="title" href="/blog/2023/03/18/React%E6%A8%A1%E6%8B%9F%E7%A7%BB%E5%85%A5title%E6%8F%90%E7%A4%BA/" title="React模拟移入title提示">React模拟移入title提示</a><time datetime="2023-03-18T14:58:49.000Z" title="发表于 2023-03-18 22:58:49">2023-03-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/03/08/React%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6%E6%9C%89%E5%93%AA%E4%BA%9B%E4%BC%98%E7%82%B9%E5%92%8C%E7%BC%BA%E7%82%B9/" title="React高阶组件有哪些优点和缺点"><img src="/blog/2023/03/08/React%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6%E6%9C%89%E5%93%AA%E4%BA%9B%E4%BC%98%E7%82%B9%E5%92%8C%E7%BC%BA%E7%82%B9/react-logo.png" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="React高阶组件有哪些优点和缺点"/></a><div class="content"><a class="title" href="/blog/2023/03/08/React%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6%E6%9C%89%E5%93%AA%E4%BA%9B%E4%BC%98%E7%82%B9%E5%92%8C%E7%BC%BA%E7%82%B9/" title="React高阶组件有哪些优点和缺点">React高阶组件有哪些优点和缺点</a><time datetime="2023-03-08T14:58:49.000Z" title="发表于 2023-03-08 22:58:49">2023-03-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/08/02/useContext%E6%A8%A1%E6%8B%9Fredux/" title="useContext模拟redux"><img src="/blog/2022/08/02/useContext%E6%A8%A1%E6%8B%9Fredux/react-logo.png" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="useContext模拟redux"/></a><div class="content"><a class="title" href="/blog/2022/08/02/useContext%E6%A8%A1%E6%8B%9Fredux/" title="useContext模拟redux">useContext模拟redux</a><time datetime="2022-08-02T14:58:49.000Z" title="发表于 2022-08-02 22:58:49">2022-08-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/07/13/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%9D%A2%E8%AF%95%E9%A2%98/" title="小程序面试题"><img src="/blog/2022/07/13/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%9D%A2%E8%AF%95%E9%A2%98/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E6%A0%87.jpeg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="小程序面试题"/></a><div class="content"><a class="title" href="/blog/2022/07/13/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%9D%A2%E8%AF%95%E9%A2%98/" title="小程序面试题">小程序面试题</a><time datetime="2022-07-13T15:39:09.000Z" title="发表于 2022-07-13 23:39:09">2022-07-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/07/10/HTML%E5%92%8CCSS%E9%9D%A2%E8%AF%95%E9%A2%98/" title="HTML和CSS面试题"><img src="/blog/2022/07/10/HTML%E5%92%8CCSS%E9%9D%A2%E8%AF%95%E9%A2%98/csslogo.png" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="HTML和CSS面试题"/></a><div class="content"><a class="title" href="/blog/2022/07/10/HTML%E5%92%8CCSS%E9%9D%A2%E8%AF%95%E9%A2%98/" title="HTML和CSS面试题">HTML和CSS面试题</a><time datetime="2022-07-10T14:22:28.000Z" title="发表于 2022-07-10 22:22:28">2022-07-10</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By 破破</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/blog/js/utils.js?v=4.14.0-b3"></script><script src="/blog/js/main.js?v=4.14.0-b3"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><script>(() => {
  const runMermaid = (ele) => {
    window.loadMermaid = true
    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

    Array.from(ele).forEach((item, index) => {
      const mermaidSrc = item.firstElementChild
      const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
      const mermaidID = 'mermaid-' + index
      const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent

      const renderFn = mermaid.render(mermaidID, mermaidDefinition)

      const renderV10 = () => {
        renderFn.then(({svg}) => {
          mermaidSrc.insertAdjacentHTML('afterend', svg)
        })
      }

      const renderV9 = svg => {
        mermaidSrc.insertAdjacentHTML('afterend', svg)
      }

      typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
    })
  }

  const codeToMermaid = () => {
    const codeMermaidEle = document.querySelectorAll('pre > code.mermaid')
    if (codeMermaidEle.length === 0) return
    
    codeMermaidEle.forEach(ele => {
      const newEle = document.createElement('div')
      newEle.className = 'mermaid-wrap'
      newEle.innerHTML = `<pre class="mermaid-src" hidden>${ele.textContent}</pre>`
      ele.parentNode.replaceWith(newEle)
    })
  }

  const loadMermaid = () => {
    if (false) codeToMermaid()
    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
    if ($mermaid.length === 0) return

    const runMermaidFn = () => runMermaid($mermaid)
    btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid')
    window.loadMermaid ? runMermaidFn() : btf.getScript('https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js').then(runMermaidFn)
  }
  
  btf.addGlobalFn('encrypt', loadMermaid, 'mermaid')
  window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
})()</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>